<!-- 设置 -->
<template>
  <view>
    <aster-back
      font-color="#333"
      :show-title="true"
      title="设置"
      :is-back="false"
      @back="
        () => {
          router.pushTab(config.route.my);
        }
      "
    />
    <view class="border-radius margin-top-sm">
      <aster-list-title title="个人资料" iconfont="" @goto="to_personal()" />
      <aster-list-title title="帐号安全" iconfont="" @goto="to_security()" />
    </view>

    <view class="border-radius margin-top-sm">
      <aster-list-title title="意见反馈" iconfont="" @goto="to_feedback()" />
      <aster-list-title title="用户协议" iconfont="" @goto="to_register()" />
      <aster-list-title title="隐私政策" iconfont="" @goto="to_privacy()" />
      <aster-list-title title="关于Aster" iconfont="" :tip="version" @goto="to_about()" />
    </view>

    <view class="btn">
      <button @click="logout()">退出登录</button>
    </view>
  </view>
</template>
<script setup lang="ts">
  import AsterBack from '@/components/common/aster-back.vue';
  import AsterListTitle from '@/components/common/aster-list-title.vue';
  import config from '@/utils/config';
  import { router } from '@/utils/router';
  import { ref } from 'vue';
  import { useAuthStore } from '@/store/modules/auth';
  import { ResultEnum } from '@/enums/httpEnum';

  const authStore = useAuthStore();

  const version = ref('版本1.0.0');

  const to_personal = () => {
    router.push(config.route.personal);
  };

  const to_security = () => {
    router.push(config.route.security);
  };

  const to_feedback = () => {
    router.push(config.route.feedback);
  };

  const to_register = () => {
    router.push(config.route.register_agreement);
  };

  const to_privacy = () => {
    router.push(config.route.privacy_policy);
  };

  const to_about = () => {
    // router.push(config.route.about);
  };

  const logout = () => {
    authStore.loginOut().then(({ data }) => {
      console.log(data);
      if (data.code == ResultEnum.SUCCESS) {
        router.pushTab(config.route.home);
      }
    });
  };
</script>
<style lang="scss">
  page {
    padding: 0 20rpx;
  }

  .btn {
    border-radius: 20rpx;
    margin-top: 30rpx;

    button {
      background-color: #ff6a6c;
      color: #fff;
      font-size: 32rpx;
    }
  }
</style>
